<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" @submit.prevent="onSubmit" style="margin:20px;min-width:600px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
                <el-form-item label="活动排序">
                    <el-col :span="12">
                        <el-input v-model="form.displayorder"></el-input>
                        <label class="subinfo">数字越大，排名越靠前,如果为空，默认排序方式为创建时间</label>
                    </el-col>
                </el-form-item>
                <el-form-item label="活动名称" prop="title">
                    <el-col :span="12">
                        <el-input v-model="form.title"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="副标题" prop="subtitle">
                    <el-col :span="12">
                        <el-input v-model="form.subtitle"></el-input>
                        <label class="subinfo">副标题用于补充描述活动的扣课情况和费用</label>
                    </el-col>
                </el-form-item>
                <el-form-item label="限报人数" prop="total">
                    <el-row>
                        <el-col :span="6">
                            <el-input-number v-model="form.total" controls-position="right" :min="1" style="width: 100%;" :disabled="disabled"></el-input-number>
                        </el-col>
                        <el-col :span="4">&nbsp;&nbsp;人</el-col>
                    </el-row>
                    <label class="subinfo">活动的名额设置, 若启用活动多规格，则此处设置无效</label>
                </el-form-item>
                <el-form-item label="活动费用" prop="price">
                    <el-row>
                        <el-col :span="6">
                            <el-input-number v-model="form.price" controls-position="right" :precision="2" :min="0" style="width: 100%;" :disabled="disabled"></el-input-number>
                        </el-col>
                        <el-col :span="4">&nbsp;&nbsp;元</el-col>
                    </el-row>
                    <label class="subinfo">活动费用为用户实际需要支付的价格，只填写数字</label>

                </el-form-item>
                <el-form-item label="活动时间" prop="presell_time">
                    <el-col :span="24">
                        <el-date-picker v-model="presell_time" @change="getpresellTimerang" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <label class="subinfo">允许活动报名的时间范围</label>
                </el-form-item>
                <el-form-item label="上课时间" prop="start_time">
                    <el-col :span="24">
                        <el-date-picker v-model="form.start_time" type="datetime" placeholder="选择日期时间" @change="getstartTime" value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-col>
                    <label class="subinfo">实际上课时间，用于提前推送上课提醒</label>
                </el-form-item>
                <el-form-item label="提醒时间(课前)" label-width="108">
                    <div>
                        <el-input v-model="form.reminder_time" type="number" style="width: 220px" :min="0"></el-input>小时
                        <div class="subinfo" style="padding-left: 100px">距离上课时间X小时触发消息推送，已关注用户将收到课程提醒。默认0不推送消息</div>
                    </div>
                </el-form-item>
                <el-form-item label="主办中心" prop="host_store_id">
                    <el-select v-model="form.host_store_id" filterable placeholder="请选择" style="width: 50%" @change="selectCenter">
                        <el-option v-for="item in optionsCenter" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <br>
                    <span class="subinfo">主办中心为金额结算中心，存在多中心联合发起的活动，金额最终将结算至此中心</span>
                </el-form-item>
                <el-form-item label="适用中心">
                    <el-select v-model="form.apply_ids" multiple placeholder="请选择" style="width: 50%" @change="selectApply" value-key="item">
                        <el-option v-for="item in optionsCenter" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <br>
                    <span class="subinfo">此处留空将适用于全部中心，将被该商户下的所有门店用户所见</span>
                </el-form-item>
                <el-form-item label="活动图片" prop="banner">
                    <div class="avatar-uploader">
                        <el-upload action="string" accept="image/jpeg,image/gif,image/png" :http-request="uploadHttp" :show-file-list="false" :on-success="handleAvatarSuccess"
                                   :on-change="onUploadChange" :before-upload="beforeAvatarUpload" :on-error="handleError" ref="upload">
                            <img v-if="form.banner" :src="form.banner" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </div>
                    <span class="subinfo">强制要求图片尺寸为 750*560 px 否则非常影响界面美观 </span>
                </el-form-item>
<!--                <el-form-item label="报名通知">-->
<!--                    <el-row :gutter="10">-->
<!--                        <el-col :span="6">-->
<!--                            <el-input v-model="form.users" :disabled="true"></el-input>-->
<!--                        </el-col>-->
<!--                        <el-col :span="4">-->
<!--                            <searchUsers @increase="choiceUsers"></searchUsers>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                </el-form-item>-->

                <el-form-item label="报名通知">
                    <el-row :gutter="10">
                        <el-col :span="6" style="width: auto">
                            <ul class="inform">
                                <li v-for="(user, index) in users" :key="index">{{user.nickname}}<i class="el-icon-close" style="cursor: pointer" @click="deleteOneInform(index)"></i></li>
                            </ul>
                            <!--							<el-input v-model="form.users" :disabled="true"></el-input>-->
                        </el-col>
                        <el-col :span="4">
                            <searchUsers @increase="choiceUsers"></searchUsers>
                        </el-col>
                    </el-row>
                    <span class="subinfo" style="padding-left: 4px">选择通知人后将会收到该活动的报名订单通知</span>
                </el-form-item>


<!--                <el-form-item label="自动上架">-->
<!--                    <el-switch v-model="form.auto_status" :active-value="1" :inactive-value="0"></el-switch>-->
<!--                    <label class="subinfo"> 活动在选择时间内自动上架，过期自动下架</label>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="上架时间" v-if="form.auto_status">-->
<!--                    <el-col :span="24">-->
<!--                        <el-date-picker v-model="auto_time" type="datetimerange" range-separator=" 至 " placeholder="请选择时间段" @change="getautoTimerang"-->
<!--                                        value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">-->
<!--                        </el-date-picker>-->
<!--                    </el-col>-->
<!--                </el-form-item>-->
                <el-form-item label="是否隐藏">
                    <el-switch v-model="form.list_hide" :active-value="1" :inactive-value="0"></el-switch>
                    <label class="subinfo"> 是否从活动列表中隐藏该活动</label>
                </el-form-item>
                <el-form-item label="支持退款">
                    <el-switch v-model="form.is_refund" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="自动退款">
                    <el-switch v-model="form.is_auto_refund" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="是否等位">
                    <el-switch v-model="form.is_line" :active-value="1" :inactive-value="0" :disabled="isLineDisabled"></el-switch>
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="活动详情" name="second">
<!--                这是富文本编辑器上传图片-->
                <el-form-item label="活动详情">
                    <!-- 图片上传组件辅助-->
<!--                    <el-upload-->
<!--                            class="avatar-uploader up-img"-->
<!--                            style="display: none"-->
<!--                            action="/api/activity/visitor/uploadimage"-->
<!--                            name="image"-->
<!--                            :show-file-list="false"-->
<!--                            :on-success="uploadSuccess"-->
<!--                            :on-error="uploadError">-->
<!--                    </el-upload>-->
<!--                    <quill-editor v-model="form.content" ref="myQuillEditor" class="myQuillEditor" :options="editorOption" @ready="onEditorReady($event)">-->
<!--                    </quill-editor>-->
                    <div>
                        <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
<!--                        <el-button @click="returnContent">显示编辑器内容</el-button>-->
<!--                        <div>{{dat.content}}</div>-->
                    </div>

                </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="规格" name="third">
                <el-form-item label="规格">
                    <el-switch v-model="form.hasoption" :active-value="1" :inactive-value="0"></el-switch>
                    <label class="subinfo" style="display: block;">启用活动规格后，该活动不支持等为位功能，活动的价格及报名人数以活动规格为准,报名人数设置为0则会到”已报满“中，手机也不会显示,
                        -1为不限制</label>
                    <el-card shadow="hover" v-show="form.hasoption === 1">
                        1. 拖动规格可调整规格显示顺序, 更改规格及规格项后请点击下方的【刷新规格项目表】来更新数据。<br>
                        2. 每一种规格代表不同价格类型，例如上午场、下午场为一种规格，一家三口、一家五口为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能付款。<br>
                        3.本功能多用于大型活动的多种价格规格。
                    </el-card>
                    <div v-show="form.hasoption === 1">
                        <ul style="margin-bottom: 30px" class="spec">
                            <li v-for="(items, index) in list" :key="index">
                                <el-row>
                                    <el-col :span="18">
                                        <el-input v-model="items.title" placeholder="规格名称 (比如: 颜色)" style="height: 42px;line-height: 42px;"></el-input>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-button-group>
                                            <el-button type="primary" icon="el-icon-plus" @click="addSonInput(index)">添加规格项</el-button>
                                            <el-button type="danger" icon="el-icon-delete" @click="deleteCurrent(items,index)"></el-button>
                                        </el-button-group>
                                    </el-col>
                                </el-row>
                                <div style="display: flex;flex-wrap: wrap">
                                    <div class="lis" v-for="(i, ins) in items.item" :key="ins">
                                        <el-input v-model="i.title" placeholder="请输入内容"></el-input>
                                        <el-button type="danger" icon="el-icon-close"@click="deleteCurrentSon(items,ins)"></el-button>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <el-button type="primary" icon="el-icon-plus" @click="addInput">添加规格</el-button>
                        <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新规格项目表</el-button>
                        <span style="font-size: 12px;color: #909399;padding-left: 20px">第二次刷新，数据将会清空</span>
                        <div style="margin-top: 20px" v-if="isShowTable">
                            <el-table
                                    :data="tableData"
                                    border
                                    style="width: 100%">
                                <el-table-column
                                        prop="spec"
                                        label="规格"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.title }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="total"
                                        label="报名人数"
                                        width="180">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.total" placeholder=""></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="sales"
                                        label="已报名"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="text-align: center">{{ scope.row.sales }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="费用">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.price" placeholder=""></el-input>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <!--                    <el-button type="danger" @click="conTable">打印表格数据</el-button>-->
                        <!--	确认删除此规格dialog	-->
                    </div>
                    <el-dialog
                            title="提示"
                            :visible.sync="delDialogVisible"
                            width="30%">
                        <span>确认要删除此规格?</span>
                        <span slot="footer" class="dialog-footer">
								<el-button @click="delDialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="sureDel">确 定</el-button>
							</span>
                    </el-dialog>
                </el-form-item>
<!--                <spec></spec>-->
            </el-tab-pane>
            <el-tab-pane label="自定义表单" name="fourth">
                <el-form-item label="自定义表单">
                    <el-switch v-model="form.diyformtype" :active-value="1" :inactive-value="0"></el-switch>
                    <label class="subinfo" style="display: block;">启用活动规格后，该活动不支持等为位功能，活动的价格及报名人数以活动规格为准,报名人数设置为0则会到”已报满“中，手机也不会显示,
                        -1为不限制</label>
                </el-form-item>
            </el-tab-pane>
        </el-tabs>

        <el-form-item>
            <el-button type="primary" @click="submitForm('form')" :loading="addLoading" :disabled="specDisabled">保存活动</el-button>
            <el-button @click="back">取消</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { editActive,activeCenter,upImg,getOneActivity } from '../../api/goodsAPI'
    import { getMemberList } from '../../api/memberManagementAPI'
    // import { addgoods } from '../../api/api';
    import util from '../../common/js/util';
    import spec from '@/components/spec';
    import searchUsers from '@/components/searchUsers';
    import { quillEditor } from 'vue-quill-editor'; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import Uediter from '../../components/UE.vue';
    // 执行组合排列的函数
    function doExchange(array){
        let len = array.length;
        // 当数组大于等于2个的时候
        if(len >= 2){
            // 第一个数组的长度
            let len1 = array[0].length;
            // 第二个数组的长度
            let len2 = array[1].length;
            // 2个数组产生的组合数
            let lenBoth = len1 * len2;
            //  申明一个新数组,做数据暂存
            let items = new Array(lenBoth);
            // 申明新数组的索引
            let index = 0;
            // 2层嵌套循环,将组合放到新数组中
            for(let i=0; i<len1; i++){
                for(let j=0; j<len2; j++){
                    items[index] = array[0][i] +" , "+ array[1][j];
                    index++;
                }
            }
            // 将新组合的数组并到原数组中
            let newArr = new Array(len -1);
            for(let i=2;i<array.length;i++){
                newArr[i-1] = array[i];
            }
            newArr[0] = items;
            // 执行回调
            return doExchange(newArr);
        }else{
            return array[0];
        }
    }

    //执行
    // let array = [['a', 'b'], [1, 2, 3]];
    // var arr1 = [['j','k','g']];
    // console.log(doExchange(array));
    export default {
        data() {
            return {
                disabled: false, // 多规格中限报人数、活动费用 需要禁用
                specDisabled: false, // 保存活动按钮是否禁用
                dat: {
                    content: ''
                },
                ueditor: {
                    value: '',
                    config: {
                        initialFrameWidth: 1000,
                        initialFrameHeight: 500
                    }
                },
                activeName: 'first',
                auto_time:[],
                addLoading: false,
                presell_time: [],
                form: {
                    id: this.$route.query.id,
                    displayorder: "", // 排序 这个字段还没有
                    title: "", // 活动名称
                    subtitle: "", // 副标题
                    total: "", // 限报人数
                    // sales: "", // 活动费用
                    price: "", // 活动费用
                    presell_start_time: '', // 活动时间开始
                    presell_end_time: '', // 活动时间结束
                    start_time: "", // 上课时间
                    banner: "", // 活动图片
                    hasoption: 0, // 是否多规格(0-否 1-是)（默认0）
                    diyformtype: 0, // 是否自定义菜单(0-否 1-是)（默认0）
                    status: 0, // 是否上架(0-下架 1-上架)（默认0），上架了 才有下面三个属性
                    // auto_status: 0, // 是否自动上架(0-否 1-是)（默认0）
                    // auto_status_start: '', // 自动上架开始时间（默认0）
                    // auto_status_end: 0, // 自动上架结束时间（默认0）
                    host_store_id: '', // 活动主办中心id
                    apply_ids: [],  // 活动适用中心
                    list_hide: 0, // 是否列表隐藏(0-否 1-是)
                    is_refund: 0, // 是否支持退款(0-否 1-是)
                    is_auto_refund: 0, // 是否支持自动退款(0-否 -是)
                    notify_mid: [], // 报名通知
                    content: "", // 活动详情内容
                    is_line: 1, // 是否支持等位(0-否 1-是)
                    spec: [], // 多规格菜单（hasoption == 1 时有效 ，id=''为新增的数据）
                    option: [], // 规格信息（hasoption == 1 时有效，id=''为新增的数据）
                    reminder_time: 0
                    // update_time: "",
                },
                editorOption: {
                    placeholder: '请输入...',
                    modules: {
                        toolbar: {
                            container: [
                                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                                [{'header': 1}, {'header': 2}],               // custom button values
                                [{'list': 'ordered'}, {'list': 'bullet'}],
                                [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
                                [{'direction': 'rtl'}],                         // text direction
                                [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
                                [{'header': [1, 2, 3, 4, 5, 6, false]}],
                                [{'color': []}, {'background': []}],          // dropdown with defaults from theme
                                [{'font': []}],
                                [{'align': []}],
                                ['link', 'image'],
                                ['clean']

                            ],
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        // 触发input框选择图片文件
                                        document.querySelector('.up-img input').click()
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                },
                users: [],
                notify_mid: [], // 编辑中 暂时的 报名通知
                optionsCenter: [], // 主办中心 适用中心
                rules: {
                    title: [{
                        required: true,
                        message: '请输入活动名称',
                        trigger: 'blur'
                    },
                        {
                            min: 3,
                            message: '长度最少3个字符',
                            trigger: 'blur'
                        }
                    ],

                    subtitle: [
                        {
                            required: true,
                            message: '请输入副标题',
                            trigger: 'blur'
                        }
                    ],
                    // presell_time: [
                    //     { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    // ],
                    total: [{
                        required: true,
                        message: '请输入限报人数',
                        trigger: 'blur'
                    }],
                    price: [{
                        required: true,
                        message: '请输入活动费用',
                        trigger: 'blur'
                    }],
                    start_time: [{
                        type: 'string',
                        required: true,
                        message: '请选择上课时间',
                        trigger: 'blur'
                    }],
                    host_store_id: [{
                        required: true,
                        message: '请选择主办中心',
                        trigger: 'change'
                    }],
                    banner: [{
                        required: true,
                        message: '至少有一张图片',
                        trigger: 'change'
                    }]
                },
                value: '',
                fileList:[],
                imgInfo: {},
                // 规格参数开始
                list: [],
                delDialogVisible: false,
                delObj: {},
                tableData: [],
                isShowTable: false,
                tableData2: [
                    {
                        spec: '2016-05-02',
                        total: '王小虎',
                        price: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        spec: '2016-05-04',
                        total: '王小虎',
                        price: '上海市普陀区金沙江路 1517 弄'
                    },
                    {
                        spec: '2016-05-01',
                        total: '王小虎',
                        price: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                        spec: '2016-05-03',
                        total: '王小虎',
                        price: '上海市普陀区金沙江路 1516 弄'
                    }
                ],
                // 规格参数结束
                isLineDisabled: false
            }
        },
        created() {
            this._activeCenter() // 主办中心列表
            console.log(this.$route.query.id)
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill
            },
            newHasOption() {
                return this.form.hasoption
            }
        },
        watch: {
            newHasOption(val) {
                // val === 1 ? this.disabled = true : this.disabled = false
                if (val === 1) {
                    this.disabled = true
                    this.form.is_line = 0
                    this.isLineDisabled = true
                } else {
                    this.disabled = false
                    this.isLineDisabled = false
                }
            },
            list: {
                handler(newList, oldList) {
                  console.log(newList)
                  this.specDisabled = true
                },
                deep: true
            }

        },
        methods: {
            returnContent () {
                // this.dat.content = this.$refs.ue.getUEContent()
                this.form.content = this.$refs.ue.getUEContent()
                console.log(this.$refs.ue.getUEContent())
            },
            // 富文本里面的上传图片 成功的回调
            uploadSuccess(res, file) {
                // res为图片服务器返回的数据
                // 获取富文本组件实例
                console.log(res);
                let quill = this.$refs.myQuillEditor.quill
                // 如果上传成功
                if (res.code == 0 ) {
                //     // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片  res.url为服务器返回的图片地址
                    quill.insertEmbed(length, 'image', res.data.filename)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$message.error('图片插入失败')
                }
                // // loading动画消失
                // this.quillUpdateImg = false
            },
            // 富文本里面的上传图片 失败的回调
            uploadError() {
                // loading动画消失
                // this.quillUpdateImg = false
                this.$message.error('图片插入失败')
            },
            // 搜索用户列表
            searchUsers() {
                getMemberList().then(res => {
                    // console.log(res.data.member,'会员列表')
                    let data = res.data.member
                    let data2 = [...this.notify_mid]
                    if (data2) {
                        data.forEach(item => {
                            data2.forEach(code => {
                                if (item.id == code) {
                                    this.users.push(item)
                                }
                            })
                        })
                    }
                    // console.log(this.users)
                })
            },
            // 获取当前点击的对象
            _getOneActivity() {
                let data = { id: this.$route.query.id }
                getOneActivity(data).then(res => {
                    // this.searchUsers() // 报名通知的数据请求
                    this.form = res.data.list // 表单默认值
                    console.log(res)
                    this.ueditor.value = res.data.list.content // 活动详情的默认值
                    // console.log(this.ueditor)
                    // this.UE.getEditor('editor').setContent(123)
                    this.users = res.data.list.notify_user
                    this.notify_mid = res.data.list.notify_mid // 留下给报名通知用的 ，默认值
                    this.presell_time = [this.form.presell_start_time, this.form.presell_end_time] // 活动时间 默认值
                    this.auto_time = [this.form.auto_status_start, this.form.auto_status_end] // 上架时间 默认值
                    let data = []
                    let appIds = res.data.list.apply_ids.split(',')
                    this.optionsCenter.forEach(item => {
                        // console.log(item)
                        appIds.forEach(code => {
                            // console.log(code)
                            if (item.id == code) {
                                data.push(item.id)
                            }
                        })
                    })
                    // this.form.apply_ids = data
                    // console.log(data)
                    this.form = { ...this.form, apply_ids: data}
                    if (this.form.hasoption === 1) {
                        // 多规格
                        this.isShowTable = true
                        this.list = res.data.options.spec
                        this.tableData = res.data.options.option
                    }

                }).catch(err => {
                    let msg = err.response.data.message || '网络错误'
                    this.$message({
                        type: 'warning ',
                        message: msg
                    });
                })
            },
            // 上传活动图片
            uploadHttp(params) {
                const _file = params.file;
                this.imgInfo = params.file;
                console.log(params)
                let formData = new FormData();
                formData.append("image", _file);
                upImg(formData, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                }).then(res => {
                    this.$message({
                        type: 'success',
                        message: '图片上传成功!'
                    });
                    console.log(res)
                    this.form.banner = res.data.filename
                }).catch(err => {
                    this.$message.error(err.response.data.message);
                });
            },
            // 适用中心选择 发生改变的 事件
            selectApply(val) {
                console.log(val)
                console.log(typeof val)
                this.apply_ids = [...val]
                console.log(this.apply_ids)
            },
            // 主办中心选择 发生改变的 事件
            selectCenter(val) {
                console.log(val)
                console.log(typeof val)
                this.host_store_id = val
                console.log(this.host_store_id)
            },
            // 请求 活动主办中心列表
            _activeCenter() {
                activeCenter({length: 10000}).then(res => {
                    // console.log(res.data.store)
                    this.optionsCenter = res.data.store
                    this._getOneActivity() // 获取当前活动详情，渲染在页面上
                })
            },
            back(){
                this.$router.go(-1);//返回上一层
            },
            // 提交表单
            submitForm(formName) {
              console.log(this.form)
              delete this.form.notify_user
                if (this.form.hasoption === 1) {
                    let arr = this.tableData.map( item => item.total - 0)
                    this.form.total = arr.reduce( (sum, current) => {
                        return sum + current
                    }, 0)
                    let arr2 = this.tableData.map( item => item.price - 0)
                    this.form.price = Math.min.apply(Math, arr2)
                    this.form.spec = this.list
                    this.form.option = this.tableData
                }
                this.form.content = this.$refs.ue.getUEContent()
                this.form.reminder_time = this.form.reminder_time * 1
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var preselltime=false,autotime=false;
                        if(this.form.presell_start_time !==""){
                            preselltime=true
                        }else{
                            preselltime=false;
                            this.$message.error('请选择活动时间！');
                        }
                        if(this.form.auto_status === 1){
                            if (this.form.auto_status_start !== "") {
                                autotime=true
                            } else{
                                autotime=false;
                                this.$message.error('请选择上架时间！');
                            }
                        }else{
                            autotime=true
                        }
                        if (preselltime &&autotime) {
                            this.$confirm('确认提交吗？', '提示', {}).then(() => {
                                this.addLoading = true;
                                //NProgress.start();
                                let para = Object.assign({}, this.form);
                                console.log(para)
                                // console.log(this.$refs.myQuillEditor.value)
                                console.log(this.$refs.ue.getUEContent())

                                editActive(para).then((res) => {
                                    this.addLoading = false;
                                    //NProgress.done();
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    })
                                    this.$refs['form'].resetFields();
                                    this.$router.push('/goodslistin')
                                }).catch(err => {
                                    this.addLoading = false;
                                    let msg = err.response.data.message || '网络错误'
                                    this.$message({
                                        type: 'warning ',
                                        message: msg
                                    });
                                })
                            });
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // 富文本编辑
            onEditorReady(editor) {
                console.log(editor);
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            // 文件上传成功时的钩子
            handleAvatarSuccess(res, file, fileList) {
                console.log(res)
                console.log(file)
                console.log(fileList)
                // this.form.banner = URL.createObjectURL(file.raw);
            },
            // 文件上传失败时的钩子
            handleError(err, file, fileList) {
                console.log(err)
                console.log(file)
                console.log(fileList)
                this.$notify.error({
                    title: '错误',
                    message: `文件上传失败`
                });
            },
            // 上传文件之前的钩子
            beforeAvatarUpload(file) {
                console.log(file)
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
            onUploadChange(file,fileList) {
                // let reader = new FileReader();
                // this.form.banner = URL.createObjectURL(file.raw);
                // console.log(URL.createObjectURL(file.raw))
                // reader.onload = function(e) {
                // 	console.log(this.result) //图片的base64数据
                // }
            },

            // 子组件传过来的值 选择用户
            choiceUsers(data) {
                this.users = data
                console.log(data)
                this.form.notify_mid = this.users.map(item => item.id)
                console.log(this.form.notify_mid)
            },
            // 删除选择的 报名通知人
            deleteOneInform(index) {
                console.log(index)
                this.users.splice(index, 1)
                console.log(this.users)
                this.form.notify_mid = this.users.map(item => item.id)
                console.log(this.form.notify_mid)
            },
            // 获取上课时间
            getstartTime(date) {
                this.time = date;
                this.form.start_time = this.time;
            },
            // 获取活动时间范围
            getpresellTimerang(data) {
                console.log(data)
                if (data === null) {
                    this.form.presell_start_time = ''
                    this.form.presell_end_time = ''
                } else {
                    this.form.presell_start_time = data[0]
                    this.form.presell_end_time = data[1]
                }

            },
            getautoTimerang(date) {
                this.time = date;
                this.auto_time = this.time;
                this.form.auto_status_start = this.time[0];
                this.form.auto_status_end = this.time[1];
            },
            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
                for (let key in this.form) {
                    this.form[key] = ''
                }
            },
            // 规格开关事件
            hasoptionSelect(val) {
                console.log(val)
                this.form.hasoption = val
                if (val === 1) {
                    this.form.is_line = 0
                }
            },
            // 自定义菜单开关事件
            diyformtypeSelect(val) {
                console.log(val)
                this.form.diyformtype = val
                this.form.is_line = 0
            },
            //	规格方法
            addInput() {
                this.list.push({id: '', title:'',item: []})
            },
            deleteCurrent(data,index) {
                this.delDialogVisible = true
                console.log(data,index)
                this.delObj = data
            },
            sureDel() {
                this.delDialogVisible = false
                this.list = this.list.filter( (item) => this.delObj !== item)
                console.log(this.list)
            },
            addSonInput(index) {
                console.log(index)
                this.list[index].item.push({id: '',title: ''})
            },
            deleteCurrentSon(data, i) {
                console.log(data,i)
                data.item.splice(i, 1)
            },
            refresh() {
                console.log(this.list)
                if(this.list.length <= 0) {
                    return
                }
                this.isShowTable = true
                console.log('刷新')
                let arr = this.list.map( items => {
                    return items.item.map(ite => ite.title)
                })
                console.log(arr)
                let combine = doExchange(arr)
                let arr2 = []
                console.log(combine)
                combine.forEach( (item, index) => {
                    let obj = {}
                    obj.title = item
                    obj.id = ''
                    obj.total = ''
                    obj.price = ''
                    arr2.push(obj)
                })
                console.log(arr2)
                this.tableData = arr2
                this.specDisabled = false
            },
            conTable() {
                console.log(this.tableData)
            }

        },

        components: {
            quillEditor, //富文本
            spec, //规格组件
            searchUsers, //搜索用户
            Uediter
        }
    }
</script>

<style scoped lang="scss">
    @import '~scss_vars';

    .subinfo {
        font-size: 12px;
        color: $font-color-light;
    }

    .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 300px;
        height: 224px;
    }

    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 300px;
        height: 224px;
        line-height: 224px;
        text-align: center;
    }

    .avatar {
        width: 300px;
        height: 224px;
        display: block;
    }
    .inform {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        background-color: #DCDFE6;
        border-radius: 4px;
    }
    .inform li {
        /*margin: 5px;*/
        display: inline-block;
        padding-right: 10px;
        background-color: #F2F6FC;
    }
    .myQuillEditor .ql-container {
        height: 70% !important;
    }
    .spec {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            border: 1px solid #DCDFE6;
            padding: 10px;
            margin-bottom: 10px;
            .lis {
                display: flex;
                width: 30.4%;
                margin: 5px 5px 5px 0;
            }
        }
    }
</style>
